<template>
  <div class="app-container">
    <!-- 企业管理 -->
    <el-form class="search_box" :model="form" ref="form" label-width="100px" inline>
      <el-form-item label="标签名称" prop="name">
        <el-input v-model="form.tag" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="name">
        <!-- <el-input v-model="form.provuince" placeholder="请输入"> -->
          <el-select v-model="form.provuince" placeholder="请选择">
            <el-option
              v-for="item in provinces"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="地区">
        <el-select v-model="form.city" placeholder="请选择">
            <el-option
              v-for="item in citys"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="form.shortName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.state" placeholder="请选择">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button>清除</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-button type="success" class="el-icon-edit addBtn">新增用户</el-button>
    </el-form>
    <el-alert title="共17条记录" type="info" show-icon :closable="false"></el-alert>
    <el-table :data="tableList" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="number" label="企业编号" width="180" align="center"></el-table-column>
      <el-table-column prop="company" label="企业简称" width="100" align="center"></el-table-column>
      <el-table-column prop="tags" label="标签" width="100" align="center"></el-table-column>
      <el-table-column prop="creatorID" label="创建者" width="100" align="center"></el-table-column>
      <el-table-column prop="addDate" label="创建日期" width="180" align="center"></el-table-column>
      <el-table-column prop="remarks" label="备注"  align="center"></el-table-column>
      <el-table-column prop="state" label="状态" width="100" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template>
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="warning" icon="el-icon-close" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import {companyList} from '@/api/companys'
import  {stateOptions} from '@/utils/basedate'
import {provinces, citys} from '@/utils/citydata'
export default {
  name: "Companys",
  data() {
    return {
      // 公共数据
      stateOptions,
      // 市县数据
      provinces, citys,
      form: {
        page: 1,
        pagesize: 10,
        tag: "", //标签名称
        provuince: "", //城市
        city: "", //城区
        shortName: "", //企业简称
        state: "", //状态
      },
      tableList: [],
      total: ''
    };
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    async getTableList() {
      const res=await companyList(this.form)
      console.log(res);
      this.tableList = res.items
      res.counts = this.total
    },
    // 搜索按钮
    async search() {
      console.log(this.form);
    }

  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .search_box {
    background-color: #fff;
    padding: 20px;
    .addBtn {
      // margin-left: 800px;
    }
  }
}
</style>